<template>
    <div class="home">
        <div class="aboveBox">
            <el-input v-model="ticketStart" placeholder="请输入想查询的起点" style="width: 45%;margin: 0 20px;"></el-input>
            <el-input v-model="ticketEnd" placeholder="请输入想查询的终点" style="width: 45%;margin: 0 20px;"></el-input>
            <el-button style="margin:0 0 0 10px;" @click="findTicketByplace()">点击搜索</el-button>
        </div>
        <div class="belowBox" v-if="ticketList.length > 0">
            <el-table :data="ticketList" style="width: 100%;border-radius: 10px;height: 100%;">
                <el-table-column label="种类" prop="ticket_zl">
                </el-table-column>
                <el-table-column label="起点" prop="ticket_start">
                </el-table-column>
                <el-table-column label="终点" prop="ticket_end" show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="出发时间" prop="ticket_starttime" show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="到达时间" prop="ticket_endtime">
                </el-table-column>
                <el-table-column label="票价" prop="ticket_money" show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="数量" prop="ticket_number">
                </el-table-column>
            </el-table>
        </div>
        <div class="belowBox" v-if="ticketList.length <= 0">
            <div style="width: 100%;font-size: 50px;text-align: center;">
                暂无相关数据
            </div>
        </div>
        <el-backtop :right="60" :bottom="100" />
    </div>
</template>

<script>
import api from '@/api'
export default {
    data() {
        return {
            pageIndex: 1,
            pageSize: 10,
            total: 10,
            ticketStart: '',
            ticketEnd: '',
            ticketList: [],
            form: {
                _id: "",
                ticket_zl: "",
                ticket_start: "",
                ticket_end: "",
                ticket_starttime: "",
                ticket_endtime: "",
                ticket_money: "",
                ticket_number: "",
            },
            formLabelWidth: '80px'
        };
    },
    mounted() {
        this.getTicket()
    },
    methods: {
        async getTicket() {
            let res = await api.getTicket({ pageIndex: this.pageIndex, pageSize: this.pageSize })
            if (res?.code == 200) {
                this.ticketList = res.data;
                this.total = res.total
            } else {
                this.ticketList = []
            }
        },
        async findTicketByplace() {
            if (this.ticketStart === '' && this.ticketEnd === '') {
                this.getTicket()
            }
            else if (this.ticketStart === '') {
                this.$notify({
                    title: '',
                    message: '起点不能为空',
                    type: 'warning'
                });
            } else if (this.ticketEnd === '') {
                this.$notify({
                    title: '',
                    message: '终点不能为空',
                    type: 'warning'
                });
            } else {
                this.ticketList = []
                let res = await api.findTicketByplace({ ticket_end: this.ticketEnd, ticket_start: this.ticketStart })
                if (res?.code == 200) {
                    this.ticketList = res.data;
                } else {
                    this.ticketList = []
                }
            }
        }
    }
};
</script>

<style scoped>
.home {
    width: 100%;
    height: 100vh;
}

.aboveBox {
    width: 85%;
    height: 30px;
    padding: 20px;
    margin: 10px auto;
    background-color: #ddd;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.belowBox {
    width: 85%;
    height: 80vh;
    padding: 20px;
    margin: 10px auto;
    background-color: #ddd;
    border-radius: 10px;
    overflow-y: scroll;
}

.belowBox::-webkit-scrollbar {
    display: none;
}

.img {
    width: 40%;
    height: 500px;
    overflow: hidden;
    border-radius: 20px;

}

.image {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.el-image {
    width: 100%;
    height: 100%;
}
</style>